<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1 id="example">name:{{name}}</h1>
  <input type="text" id="example" value="name"/>
  <script>
    function vue(){
      this.data = {
        name : 'yy'
      }
      Object.defineProperty(this.data, 'name', {
        get : function(){

        },
        set : function(val){
          console.log(val)
          let name =document.getElementById("example")
          let str = name.innerHTML.replace("{{name}}",val)
          name.innerHTML = str

        }
      })
    }
    let vm = new vue();
    document.getElementById("example").onclick = function(){
      vm.data.name = "111"
    }

    //ES6 
    let watch = new Proxy({y:2},{
      get: function (target, key, receiver) {
    // console.log(`getting ${key}!`);
    console.log(Reflect.get(target, key,  receiver));
  },
      set(target,key,value,receiver) {
        // console.log(target,key,value);
        console.log(Reflect.set(target, key, value, receiver));
      }
    })

    watch.a = 11
    watch.a
  </script>
</body>
</html>